<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-03-06 17:48:00
 * @LastEditTime: 2023-03-08 10:14:14
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\product\components\classifyBind.vue
-->
<template>
  <div class="classify">
    <el-dialog draggable v-model="dialog.show" width="800px" :before-close="handleClose" class="custom-dialog">
      <template #header>{{ props.categoryName }} 绑定规格 </template>
      <el-divider> 拖动移入移出 已选中支持拖动排序</el-divider>
      <el-alert :title="`当前选中 ${dialog.selects.length}`" type="success" :closable="false" />

      <el-card :body-style="{ padding: '10px' }" class="mb-10">
        <div slot="header"></div>
        <p v-if="!dialog.selects.length">请在下方,选择你需要的规格拖入。</p>
        <draggable :list="dialog.selects" group="people" animation="300">
          <template #item="{ element }">
            <el-tag class="mr-10 mt-5 mb-5" size="large" :type="element.isRequired ? 'danger' : 'success'">{{ element.label }}</el-tag>
          </template>
        </draggable>
      </el-card>
      <el-alert :title="`候选 ${dialog.noSelects.length}`" type="info" :closable="false" />
      <el-card :body-style="{ padding: '10px' }">
        <div slot="header"></div>
        <draggable :list="dialog.noSelects" group="people" :sort="false">
          <template #item="{ element }">
            <el-tag class="mr-10 mt-5 mb-5" size="large" :type="element.isRequired ? 'danger' : 'success'">{{ element.label }}</el-tag>
          </template>
        </draggable>
        <p v-if="!dialog.noSelects.length">无候选项规格</p>
      </el-card>
      <template #footer>
        <span class="dialog-footer">
          <z-button type="" @click="handleClose" icon="close">取消</z-button>
          <z-button icon="check" @click="onCheck" :loading="dialog.loading"> 确认 </z-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import draggable from 'vuedraggable';
import { post } from '@/api/index';
let $message = inject('$message');
let emit = defineEmits(['update:modelValue', 'onSave']);
let props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  categoryId: {
    type: Number,
    default: 0
  },
  categoryName: {
    type: String,
    default: ''
  }
});
let dialog = reactive({
  show: false,
  options: [],
  loading: false,
  noSelects: [],
  selects: []
});
watch(
  () => props.modelValue,
  val => {
    dialog.show = val;
    if (!val) return;
    getSpecList();
  },
  {
    immediate: true
  }
);
const handleClose = () => {
  emit('update:modelValue', false);
};
const getSpecList = async () => {
  let { result } = await post('CustomCategorySpec/GetList', { pageSize: 999, pageIndex: 1, categoryId: props.categoryId, isNotContain: true });
  dialog.selects = result.items.filter(r => r.categoryId);
  dialog.noSelects = result.items.filter(r => !r.categoryId);
};
const onCheck = async () => {
  try {
    dialog.loading = true;
    await post('CustomCategorySpec/Create', {
      categoryId: props.categoryId,
      customProductSpecIds: dialog.selects.map(r => r.id)
    });
    $message.success('保存成功');
    dialog.loading = false;
    emit('onSave');
  } catch (error) {
    console.log('CustomCategorySpec/Create 错误', error);
    dialog.loading = false;
  }
};
</script>

<style lang="scss" scoped>
.classify {
  :deep(.custom-dialog) {
    .el-dialog__body {
      padding-top: 0;
    }
  }
}
</style>
